<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form :label-col="{ md: { span: 6 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }">
        <a-row>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="名称">
              <a-input v-model:value.trim="maintainFeeAttachWhere.name" placeholder="请输入"
                allow-clear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="模块">
              <a-select v-model:value="maintainFeeAttachWhere.atModules" placeholder="请选择"
                 allow-clear>
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="运费">运费</a-select-option>
                <a-select-option value="提箱">提箱</a-select-option>
                <a-select-option value="进港">进港</a-select-option>
                <a-select-option value="其他">其他</a-select-option>
                <a-select-option value="单项">单项</a-select-option>
                <a-select-option value="采购">采购</a-select-option>
                <a-select-option value="报关费">报关费</a-select-option>
                <a-select-option value="易港通">易港通</a-select-option>
                <a-select-option value="财务报销">财务报销</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24" >
            <a-form-item :wrapper-col="{ span: 24 }">
              <em></em>
              <a-space>
                <a-button type="primary" @click="maintainFeeAttachReload">查询</a-button>
                <a-button @click="maintainFeeAttachReset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- 表格 -->
      <ele-pro-table ref="maintainFeeAttachTableRef" row-key="id" :columns="columns" :datasource="datasource"
        :scroll="{ x: 1000 }">
        <template #toolbar>
          <a-space>
            <a-button type="primary" @click="maintainFeeAttachOpenEdit()"
              v-any-permission="['order:maintainFeeAttach:save']">
              <template #icon>
                <plus-outlined />
              </template>
              <span>新建</span>
            </a-button>
          </a-space>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <a @click="maintainFeeAttachOpenEdit(record)" v-any-permission="['order:maintainFeeAttach:update']">修改</a>
              <a-divider type="vertical" />
              <a-popconfirm title="确定要删除此项吗？" @confirm="maintainFeeAttachRemove(record)">
                <a class="ele-text-danger" v-any-permission="['order:maintainFeeAttach:remove']">删除</a>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </ele-pro-table>
    </a-card>
    <!-- 附加费维护添加、修改弹窗 -->
    <ele-modal :width="460" v-model:visible="maintainFeeAttachVisible" :confirm-loading="maintainFeeAttachLoading"
      :title="maintainFeeAttachIsUpdate ? '修改附加费维护' : '新建附加费维护'" :body-style="{ paddingBottom: '8px' }"
      @ok="maintainFeeAttachSave" :maskClosable="false">
      <a-form ref="maintainFeeAttachFormRef" :model="maintainFeeAttachForm" :rules="maintainFeeAttachRules"
        :label-col="{ md: { span: 7 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 17 }, sm: { span: 24 } }">
        <a-form-item label="费用名" name="name">
          <a-input allow-clear :maxlength="200" placeholder="请输入费用名" v-model:value="maintainFeeAttachForm.name"
            autocomplete="off" />
        </a-form-item>
        <a-form-item label="箱型" name="boxType">
          <a-select v-model:value="maintainFeeAttachForm.boxType" placeholder="请选择" allow-clear>
            <a-select-option value="">请选择</a-select-option>
            <a-select-option value="大柜">大柜</a-select-option>
            <a-select-option value="小柜">小柜</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="金额" name="price">
          <a-input allow-clear :maxlength="200" placeholder="请输入金额" v-model:value="maintainFeeAttachForm.price"
            autocomplete="off" />
        </a-form-item>
        <a-form-item label="模块" name="atModules">
          <a-select v-model:value="maintainFeeAttachForm.atModules" placeholder="请选择" allow-clear>
            <a-select-option value="运费">运费</a-select-option>
            <a-select-option value="提箱">提箱</a-select-option>
            <a-select-option value="进港">进港</a-select-option>
            <a-select-option value="其他">其他</a-select-option>
            <a-select-option value="单项">单项</a-select-option>
            <a-select-option value="采购">采购</a-select-option>
            <a-select-option value="报关费">报关费</a-select-option>
            <a-select-option value="易港通">易港通</a-select-option>
            <a-select-option value="财务报销">财务报销</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="经度" name="longitude">
          <a-input allow-clear :maxlength="200" placeholder="请输入经度" v-model:value="maintainFeeAttachForm.longitude"
            autocomplete="off" disabled="true" />
        </a-form-item>
        <a-form-item label="纬度" name="latitude">
          <a-input allow-clear :maxlength="200" placeholder="请输入纬度" v-model:value="maintainFeeAttachForm.latitude"
            autocomplete="off" disabled="true" />
        </a-form-item>
        <a-form-item label="半径(米)" name="radius">
          <a-input allow-clear :maxlength="200" placeholder="半径(米)" v-model:value="maintainFeeAttachForm.radius"
            autocomplete="off" disabled="true" />
        </a-form-item>
        <a-form-item label="类型" name="yardDock">
          <a-select v-model:value="maintainFeeAttachForm.yardDock" placeholder="请选择" allow-clear>
            <a-select-option value="">请选择</a-select-option>
            <a-select-option value="堆场">堆场</a-select-option>
            <a-select-option value="港口">港口</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注" name="remark">
          <a-input allow-clear :maxlength="200" placeholder="请输入备注" v-model:value="maintainFeeAttachForm.remark"
            autocomplete="off" />
        </a-form-item>
      </a-form>
    </ele-modal>
  </div>
</template>

<script setup>
import { ref, reactive,watch } from 'vue';
import { toDateString, numberReg } from 'ele-admin-pro';
import useFormData from '@/utils/use-form-data';
import { message } from 'ant-design-vue';
import { TIME_OUT } from '@/config/damon';

import { pageMaintainFeeAttachs, removeMaintainFeeAttach, addMaintainFeeAttach, updateMaintainFeeAttach } from '@/api/order/maintainFeeAttach';

// 表格实例
const maintainFeeAttachTableRef = ref(null);

// 表格列配置
const columns = ref([
  {
    key: 'index',
    width: 48,
    align: 'center',
    fixed: 'left',
    hideInSetting: true,
    customRender: ({ index }) => index + (maintainFeeAttachTableRef.value?.tableIndex ?? 0)
  },
  {
    title: '费用名',
    dataIndex: 'name',
    key: 'name',
    // sorter: true,
  },
  {
    title: '箱型',
    dataIndex: 'boxType',
    key: 'boxType',
    // sorter: true,
  },
  {
    title: '金额',
    dataIndex: 'price',
    key: 'price',
    // sorter: true,
  },
  {
    title: '模块',
    dataIndex: 'atModules',
    key: 'atModules',
    // sorter: true,
  },
  {
    title: '经度',
    dataIndex: 'longitude',
    key: 'longitude',
    // sorter: true,
  },
  {
    title: '纬度',
    dataIndex: 'latitude',
    key: 'latitude',
    // sorter: true,
  },
  {
    title: '半径(米)',
    dataIndex: 'radius',
    key: 'radius',
    // sorter: true,
  },
  {
    title: '类型',
    dataIndex: 'yardDock',
    key: 'yardDock',
    // sorter: true,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    // sorter: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    // sorter: true,
    resizable: true,
    width: 150,
    ellipsis: true,
    customRender: ({ text }) => toDateString(text)
  },
  {
    title: '创建人',
    dataIndex: 'createName',
    key: 'createName',
    // sorter: true,
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime',
    // sorter: true,
    resizable: true,
    width: 150,
    ellipsis: true,
    customRender: ({ text }) => toDateString(text)
  },
  {
    title: '更新人',
    dataIndex: 'updateName',
    key: 'updateName',
    // sorter: true,
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    align: 'center',
    fixed: 'right',
    hideInSetting: true
  }
]);

// 表单数据
const { form: maintainFeeAttachWhere, resetFields } = useFormData({
  username: '',
  sex: undefined
});

// 表格数据源
const datasource = ({ page, limit, where, orders }) => {
  return pageMaintainFeeAttachs({ ...where, ...orders, page, limit });
};

/* 搜索 */
const maintainFeeAttachReload = () => {
  maintainFeeAttachTableRef?.value?.reload({ page: 1, where: maintainFeeAttachWhere });
};

/* 搜索 */
const maintainFeeAttachReload2 = () => {
  maintainFeeAttachTableRef?.value?.reload();
};

let where_timeout = 0
watch(() => maintainFeeAttachWhere, (val) => {
  clearTimeout(where_timeout)
  where_timeout = setTimeout(() => {
    console.log(22);
    maintainFeeAttachReload()
  }, TIME_OUT);
},
{ deep: true }
)

/*  重置 */
const maintainFeeAttachReset = () => {
  resetFields();
  maintainFeeAttachReload();
};

/* 删除单个 */
const maintainFeeAttachRemove = (record) => {
  const hide = message.loading('请求中..', 0);
  removeMaintainFeeAttach(record.id).then((msg) => {
    hide();
    message.success(msg);
    maintainFeeAttachReload2();
  }).catch((e) => {
    hide();
    message.error(e.message);
  });
};

// 当前选中数据
const maintainFeeAttachCurrent = ref(null);

// 弹窗是否打开
const maintainFeeAttachVisible = ref(false);

// 是否是修改
const maintainFeeAttachIsUpdate = ref(false);

// 提交状态
const maintainFeeAttachLoading = ref(false);

//
const maintainFeeAttachFormRef = ref(null);

// 表单数据
const { form: maintainFeeAttachForm, resetFields: maintainFeeAttachResetFormFields } = useFormData({
  id: undefined,
  customer: '',
  vessel: '',
  longitude: '0',
  latitude: '0',
  radius: '1000',
});

// 表单验证规则
const maintainFeeAttachRules = reactive({
  name: [
    {
      required: true,
      message: '请输入名称',
      type: 'string',
    }
  ],
  price: [
    {
      required: true,
      pattern: numberReg,
      message: '请输入数字',
    }
  ],
  atModules: [
    {
      required: true,
      message: '请输入模块',
      type: 'string',
    }
  ],
  longitude: [
    {
      required: true,
      message: '请输入经度',
      type: 'string',
    }
  ],
});

/* 打开编辑弹窗 */
const maintainFeeAttachOpenEdit = (record) => {
  maintainFeeAttachResetFormFields();
  maintainFeeAttachFormRef.value?.clearValidate();
  maintainFeeAttachCurrent.value = record?? {};
  maintainFeeAttachVisible.value = true;
  Object.assign(maintainFeeAttachForm, record ?? {});
  maintainFeeAttachIsUpdate.value = !!record;
};

/* 保存编辑 */
const maintainFeeAttachSave = () => {
  if (!maintainFeeAttachFormRef.value) {
    return;
  }
  maintainFeeAttachFormRef.value.validate().then(() => {
    maintainFeeAttachLoading.value = true;
    const saveOrUpdate = maintainFeeAttachIsUpdate.value ? updateMaintainFeeAttach : addMaintainFeeAttach;
    saveOrUpdate(maintainFeeAttachForm).then((msg) => {
      maintainFeeAttachLoading.value = false;
      message.success(msg);
      maintainFeeAttachVisible.value = false;
      maintainFeeAttachReload2();
    }).catch((e) => {
      maintainFeeAttachLoading.value = false;
      message.error(e.message);
    });
  }).catch(() => {
  });
};
</script>

<script>
export default {
  name: 'DemoTest'
};
</script>

